---
import Layout from '@/layouts/Layout.astro';
import Header from '@/components/Header.astro';
import Footer from '@/components/Footer.astro';
import LinkButton from '@/components/LinkButton.astro';
import config from '@/config';
import getPath from '@/utils/getPath';
---

<Layout title={`404 Not Found | ${config.title}`}>
  <Header />

  <main id="main-content" class="max-w-app mx-auto flex flex-1 items-center justify-center">
    <div class="mb-14 flex flex-col items-center justify-center">
      <h1 class="text-accent text-9xl font-bold">404</h1>
      <span aria-hidden="true">¯\_(ツ)_/¯</span>
      <p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>
      <LinkButton
        href={getPath('')}
        class="my-6 text-lg underline decoration-dashed underline-offset-8"
      >
        Go back home
      </LinkButton>
    </div>
  </main>

  <Footer />
</Layout>
